<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册事件</title>
    <style>
        .wrap{
            width: 440px;
            height: 420px;
            margin: 200px auto;
        }
        .box{
            width: 200px;
            height: 200px;
            margin: 10px;
            float: left;
        }
        #box1{
            background-color: cornflowerblue;
        }
        #box2{
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div id="box1" class="box"></div>
        <div id="box2" class="box"></div>
    </div>

    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        /* 同一个对象的事件 会相互覆盖 */
        box1.onclick = () =>{
            console.log('1');       //被覆盖
        }
        box1.onclick = () =>{
            console.log('2');       //执行
        }


        /* addEventListener 添加事件监听器 -> 不会相互覆盖 */
        /* 有3个参数 1.事件类型(字符串 不加on) 2.事件处理函数 3.是否捕获 */
        box2.addEventListener('click', ()=>{
            console.log(1);         //会被执行
        }, false)
        box2.addEventListener('click', ()=>{
            console.log(2);         //会被执行
        }, false)


        /**
         *  通过添加事件监听器的的方式注册事件 不会相互覆盖 但是有兼容问题(IE等辣鸡浏览器不兼容)
         *  IE等辣鸡浏览器要通过 attachEvent() 两个参数     1.事件类型(字符串 要加on)   2.监听器(事件处理函数)
         *  也不会相互抵消 但是只有辣鸡浏览器采用这种方式兼容
         **/


    </script>
</body>
</html>